<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/game.css">
</head>
<body>
    <div class="game-container">
        <!-- 顶部栏 -->
        <header class="top-bar">
            <div class="user-info">
                <img src="images/avatar-default.png" alt="头像" class="avatar">
                <span id="username">加载中...</span>
            </div>
            <div class="game-stats">
                <span class="gold">金币: <span id="goldAmount">0</span></span>
                <span class="gems">钻石: <span id="gemsAmount">0</span></span>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 功能按钮区 -->
            <div class="action-buttons">
                <button class="game-btn draw-btn" onclick="showDrawCards()">
                    <i class="icon-draw"></i>
                    抽卡
                </button>
                <button class="game-btn match-btn" id="matchBtn">
                    <i class="icon-match"></i>
                    匹配对战
                </button>
                <button class="game-btn formation-btn" onclick="showFormation()">
                    <i class="icon-formation"></i>
                    布阵
                </button>
                <button class="game-btn heroes-btn" onclick="showHeroes()">
                    <i class="icon-heroes"></i>
                    英雄图鉴
                </button>
                <div id="matchStatus" class="match-status"></div>
            </div>

            <!-- 状态提示区 -->
            <div id="statusMessage" class="status-message"></div>
        </main>

        <!-- 布阵弹窗 -->
        <div id="formationModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>布阵</h2>
                    <span class="close" onclick="closeFormation()">&times;</span>
                </div>
                <div class="formation-container">
                    <div class="formation-grid">
                        <div class="grid-cell" data-position="0" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                        <div class="grid-cell" data-position="1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                        <div class="grid-cell" data-position="2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                        <div class="grid-cell" data-position="3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                    </div>
                    <div class="hero-list">
                        <!-- 英雄列表将通过JS动态生成 -->
                    </div>
                </div>
                <div class="modal-buttons">
                    <button onclick="saveFormation()">保存</button>
                    <button onclick="closeFormation()">取消</button>
                </div>
            </div>
        </div>

        <!-- 英雄图鉴弹窗 -->
        <div id="heroesModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>英雄图鉴</h2>
                    <span class="close" onclick="closeHeroes()">&times;</span>
                </div>
                <div class="heroes-grid" id="heroesGrid">
                    <!-- 英雄卡片将通过JS动态生成 -->
                </div>
            </div>
        </div>

        <!-- 英雄详情弹窗 -->
        <div id="heroDetailModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 id="heroDetailName"></h2>
                    <span class="close" onclick="closeHeroDetail()">&times;</span>
                </div>
                <div class="hero-detail">
                    <div class="hero-info">
                        <div class="hero-basic">
                            <p class="hero-description" id="heroDescription"></p>
                            <div class="hero-stats">
                                <p>生命值: <span id="heroHP"></span></p>
                                <p>攻击力: <span id="heroATK"></span></p>
                                <p>速度: <span id="heroSpeed"></span></p>
                                <p>位置: <span id="heroPosition"></span></p>
                                <p>稀有度: <span id="heroRarity"></span></p>
                            </div>
                        </div>
                        <div class="hero-skills" id="heroSkills">
                            <!-- 技能信息将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 匹配弹窗 -->
        <div id="matchModal" class="modal">
            <div class="modal-content">
                <h3>匹配中...</h3>
                <div class="loading-spinner"></div>
                <button id="cancelMatch" class="cancel-btn">取消匹配</button>
            </div>
        </div>

        <!-- 添加战斗相关的模态框 -->
        <div id="battleModal" class="modal">
            <div class="modal-content">
                <h2>战斗进行中</h2>
                <div class="battle-loading">
                    <div class="spinner"></div>
                    <p>正在等待战斗结果...</p>
                </div>
            </div>
        </div>

        <div id="battleResultModal" class="modal">
            <div class="modal-content">
                <h2>战斗结果</h2>
                <div class="battle-result">
                    <div class="winner-info"></div>
                    <div class="battle-rounds"></div>
                </div>
                <button class="close-btn" onclick="closeBattleResult()">关闭</button>
            </div>
        </div>
    </div>

    <style>
        /* 现有的样式 */
        .match-status {
            margin-left: 10px;
            display: inline-block;
            font-size: 14px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .cancel-btn {
            padding: 8px 16px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        .cancel-btn:hover {
            background-color: #da190b;
        }
    </style>

    <script src="js/game.js"></script>
</body>
</html> 